<template xmlns:el-col='http://www.w3.org/1999/html'>
    <div>
        <el-row type="left"
                v-for='(thruster, index) in thrusterHori'
                :key='index'
            >
                    <el-popover
                        placement="top-start"
                        :title="(index + 1) + '号尾推'"
                        trigger="hover"
                        :content="thruster.title + ' ' + thruster.subTitle">
                        <el-button circle :type="thruster.type" :icon="thruster.icon"
                                   slot="reference"></el-button>
                    </el-popover>
            <label> {{ index + 1 }}&nbsp;号尾推</label>

        </el-row>
    </div>
</template>

<script>
export default {
    name: 'thrusterHori',
    data () {
        return {
            success : {
                type : "success",
                title : "正在运行",
                subTitle : [],
                icon : "el-icon-circle-check"
            },
            error : {
                type : "danger",
                title : "断开连接",
                subTitle : [],
                icon : "el-icon-warning"
            },
            warning : {
                type : "warning",
                title : "正在连接",
                subTitle : [],
                icon : "el-icon-loading"
            },
            info : {
                type : "info",
                title : "未运行",
                subTitle : [],
                icon : "el-icon-circle-close"
            },
            thrusterHori : [
                {
                    type: "",
                    title: "",
                    subTitle: ""
                },
                {
                    type: "",
                    title: "",
                    subTitle: ""
                }
            ]
        }
    },
    mounted() {
        var time = this.getTime()
        this.thrusterHori[0].type = this.warning.type;
        this.thrusterHori[0].icon = this.warning.icon;
        this.thrusterHori[0].title = this.warning.title;
        this.thrusterHori[0].subTitle = time;
        this.thrusterHori[1].type = this.warning.type;
        this.thrusterHori[1].icon = this.warning.icon;
        this.thrusterHori[1].title = this.warning.title;
        this.thrusterHori[1].subTitle = time
        setInterval(this.addData, 3000);
    },
    methods: {
        getTime : function() {
            var ts = arguments[0] || 0;
            var t, h, i, s;
            t = ts ? new Date(ts * 1000) : new Date();
            h = t.getHours();
            i = t.getMinutes();
            s = t.getSeconds();
            // 定义时间格式
            return (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s);
        },
        // 添加实时数据
        addData : function() {
            // 从接口获取数据并添加到数组
            this.$axios.get(this.GLOBAL.serverIp + '/api/thrusterHori/').then((res) => {
                var time = this.getTime()
                // console.log(res.data)
                this.thrusterHori[0].type = res.data.type[0];
                this.thrusterHori[0].icon = res.data.icon[0];
                this.thrusterHori[0].title = res.data.title[0];
                this.thrusterHori[0].subTitle = time;
                this.thrusterHori[1].type = res.data.type[1];
                this.thrusterHori[1].title = res.data.title[1];
                this.thrusterHori[1].icon = res.data.icon[1];
                this.thrusterHori[1].subTitle = time;
            }).catch((error)=> {
                var time = this.getTime();
                this.thrusterHori[0].type = this.error.type;
                this.thrusterHori[0].icon = this.error.icon;
                this.thrusterHori[0].title = this.error.title;
                this.thrusterHori[0].subTitle = time;
                this.thrusterHori[1].type = this.error.type;
                this.thrusterHori[1].icon = this.error.icon;
                this.thrusterHori[1].title = this.error.title;
                this.thrusterHori[1].subTitle = time;
                this.thrusterHori[2].type = this.error.type;
                this.thrusterHori[2].icon = this.error.icon;
                this.thrusterHori[2].title = this.error.title;
                this.thrusterHori[2].subTitle = time;
            });
        },
    }
};
</script>

<style scoped>
.el-row{
    padding: 10px;
}
.el-button{
    /*width: 50px;*/
    /*height: 50px;*/
    /*margin: auto auto;*/
    /*font-size: 30px;*/
}
.label{
    margin: auto auto;
}

.row-bg {
    padding: 10px 0;
    /*background-color: #f9fafc;*/
}
.buttons {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
